<template>
	<div class="radiolist">
		<div class="top">

			<i class="iconfont icon-return" @click="$router.go(-1)"></i>
			<p>电台</p>

		</div>
		<myswiper :banners="banner"></myswiper>
		<radionav ></radionav>
		<hotdj></hotdj>
		<payradio></payradio>
		<div class="" v-for=" (item,index) in id">
			<createdmusic v-if="index%3==0" :id="item"></createdmusic>
			<listenstory v-else :id = "item"></listenstory>
		</div>
		
	</div>
</template>

<script>
	import myswiper from '@/components/myswiper.vue'
	import radionav from './radiodetailchild/radiodetailnav.vue'
	import hotdj from './radiodetailchild/recommendradio.vue'
	import payradio from './radiodetailchild/payradio.vue'
	import createdmusic from './radiodetailchild/createdmusic.vue'
	import listenstory from './radiodetailchild/listenstory.vue'
	
	export default {
		name: "radiodetail",
		components: {
			myswiper,
			radionav,
			hotdj,
			payradio,
			createdmusic,
			listenstory
		},
		data() {
			return {
				id:[],
				banner: [],
				recommendDj:[],
				array1:[],
				array2:[]
			}
		},
		created() {

			this.$http.get("/banner", {
				params: {
					type: 2
				}
			}).then(res => {
				console.log(res)
				this.banner = res.data.banners
			})
			
			
			
			this.$http.get("/dj/recommend/type",{
				params: {
					type: 10001
				}
			}).then(res=>{
				console.log(res)
				
				this.array2 = res.data.djRadios
			})
			
			this.$http.get("/dj/catelist",).then(res=>{
				console.log(res)
				res.data.categories.forEach((val,index)=>{
				this.id.push(val.id)
				})
			
//				this.id = res.data.
			})
	
		}
	}
</script>

<style lang="scss" scoped>
	@import "~@/assets/css/common.scss";
	.radiolist {
		.top {
			width: 100%;
			display: flex;
			align-items: center;
			padding: vw(10) vw(16);
			display: flex;
			align-items: center;
			i {
				font-size: vw(24);
			}
			p {
				font-size: vw(18);
				margin-left: vw(4);
			}
		}
	}
</style>